<template>
  <div class="radiobox">
    <div class="head flex item-center" style="margin: 10px 0;">
        <div class="number bold black" style="margin-right: 5px;">{{ currentNum }}/{{ total }}、</div>
        <div v-html="question.title"></div>
    </div>
    <div class="content">
        <ul>
            <li  v-for="item of question.optionsList" :key="item.id" >
                <el-radio @input="changeUanswer" v-model="question.uanswer" :label="item.code">
                    <!-- <div v-html="item.answer"></div> -->
                    <div style="display: inline-block;" v-html="item.answer"></div>
                </el-radio>
                <!-- <div style="display: inline-block;" v-html="item.answer"></div> -->
            </li>
        </ul>
        
    </div>
  </div>
</template>

<script>
export default {
    props: {
        total: {
            type: Number,
            default: 1
        },
        currentNum: {
            type: Number,
            default: 1
        },
        question: {
            type: Object,
            require: true,
            default: () => {
                return {}
            }
        }
    },
    mounted() {

    },
    data() {
        return {
            // uanswer:question.uanswer
        }
    },
    methods: {
        changeUanswer(val) {
            console.log(val)
            this.$emit('changeUanswer', val)
        }
    },
    watch: {
        // question: {
        //     deep: true,
        //     handler(val) {
        //         console.log('单选题为：', val)
        //     }
        // }
    }
}
</script>

<style lang="scss" scoped>
.content {
    ul {
        li {
            padding: 10px 0;
        }
    }
}
</style>